import { Button, Card, NavBar, Toast, Image, CapsuleTabs } from "antd-mobile"
import React, { useEffect, useState } from "react"
import { httpJson } from "../../../services/http"
import ProductInfoCard from "../components/product-info-card"
import './index.css'
const ProductDetail: React.FC = () => {
    const merchantName = localStorage.getItem('merchantName')
    const monthSell = localStorage.getItem('monthSell')
    const percentPrice = localStorage.getItem('percentPrice')
    const imgUrl = localStorage.getItem('logoUrl')
    const id = localStorage.getItem('id')
    const [list, setList] = useState([])
    const [loading, setLoading] = useState<boolean>(false)
    const [click, setClick] = useState(false)
    const [sumPrice, setSumPrice] = useState(0)

    const handleClick = () => {
        console.log('点击了+')
        setClick(!click)
    }

    const handleApi = () => {
        const goodsInfo = JSON.parse(localStorage.getItem('goodsInfo') as string)
        if(goodsInfo.length === 0) return
        const prams = {
            addOrderGoodsReqBOList: goodsInfo,
            merchantId: parseInt(id as string),
        }
        httpJson('POST', '/api/order/addMerchantOrder', prams)
            .then((res: any) => {
                Toast.show('下单成功!')
                console.log(res)
            })
            .catch(err => {
                console.log(err)
            })
    }

    useEffect(() => {
        localStorage.setItem('goodsInfo', JSON.stringify([]))
        setLoading(true)
        httpJson('POST', '/api/goods/getGoodsInfoList', { merchantId: id, status: '0' })
            .then((res: any) => {
                setList(res.data.data)
                setLoading(false)
            })
            .catch(err => {
                setLoading(false)
                console.log(err)
            })
    }, [])
    useEffect(() => {
        const goodsInfo = JSON.parse(localStorage.getItem('goodsInfo') as string)
        let sum = 0 
        goodsInfo.map((item: any) => {
            sum=sum + item.price
        })
        setSumPrice(sum)
    }, [click])
    return (
        <>
            <NavBar style={{ background: '#1677ff', color: '#fff' }} onBack={() => { window.history.back() }}>菜品列表</NavBar>
            <div className="detail-container">
                <Card
                    style={{ borderRadius: 0 }}
                >
                    <div className="detail-card-content">
                        <div className="detail-card-content-info">{merchantName} <div className="detail-sale-text">月售{monthSell} 人均￥{percentPrice}</div></div>
                        <div className="detail-card-content-img"><Image src={imgUrl || ''} /></div>
                    </div>
                </Card>
                <CapsuleTabs>
                    <CapsuleTabs.Tab title='点菜' key='fruits'>
                        {list && list.length > 0 &&
                            list.map((item: any) => {
                                return <ProductInfoCard props={item} onClick={handleClick} />
                            })
                        }
                        {
                            !loading && !list.length && (
                                <p style={{ maxHeight: 800, minHeight: 600, textAlign: 'center', fontSize: 20, color: '#999', lineHeight: 20 }}>暂无数据...</p>
                            )
                        }
                        <div className="side-bar" onClick={handleApi}>￥{sumPrice} | 去结算</div>
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='评价' key='vegetables'>
                        评价
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='商家' key='animals'>
                        商家
                    </CapsuleTabs.Tab>
                </CapsuleTabs>
            </div>
        </>
    )
}

export default ProductDetail